<template>
  <div class="pld">
    <discoverm></discoverm>
    <div class="pld_main">
      <el-container>
        <el-aside width="709px" class="pldel-aside">
      
            <div>
              <img
                :src="songDetail.al.picUrl"
                alt=""
                style="width: 208px; height: 208px; float: left"
              />
            </div>
            <div
              style="width: 410px; height: auto; float: left; margin-left: 22px"
            >
              <h2 style="font-size: 30px">
                <el-button
                  type="primary"
                  style="
                    width: 60px;
                    background-color: red;
                    line-height: 10px;
                    border-radius: 20px;
                  "
                  >单曲</el-button
                >
                {{ songDetail.name }}
                <span
                  class="el-icon-video-camera"
                  style="color: red"
                  v-if="songDetail.mv != 0"
                ></span>
              </h2>

              <div class="tag-wrap">
                <span
                  class="title"
                  style="color: rgb(186, 186, 186)"
                  v-if="songDetail.tns != null"
                >
                  <span> {{ songDetail.tns[0] }} </span>
                </span>
                <div
                  class="title"
                  style="
                    color: rgb(186, 186, 186);
                    font-size: 8px;
                    margin-top: 15px;
                    margin-left: 70px;
                  "
                >
                  <span v-if="songDetail.alia[0]">{{
                    songDetail.alia[0]
                  }}</span>
                </div>
                <div
                  class="title"
                  style="
                    color: rgb(65, 144, 217);
                    font-size: 8px;
                    margin-top: 15px;
                  "
                >
                  歌手:{{ songDetail.ar[0].name }}
                </div>
                <div
                  class="title"
                  style="
                    color: rgb(65, 144, 217);
                    font-size: 8px;
                    margin-top: 15px;
                  "
                >
                  所属专辑:{{ songDetail.ar[0].name }}
                </div>
                <div
                  class="title"
                  style="
                    color: rgb(65, 144, 217);
                    font-size: 8px;
                    margin-top: 15px;
                  "
                >
                  <span
                    ><button
                      style="background-color: rgb(65, 144, 217)"
                      @click="playMusic($route.query.id)"
                    >
                      播放<i class="el-icon-video-play"></i></button
                  ></span>
                </div>
              
             
              <br />
            </div>
          </div>
           <div :class="{ open: ki == 0, flod: ki == 1 }">
                <!-- {{this.lyric}} -->
                <div class="song-title">
                  <p ref="song">{{ song }}</p>
                  <p ref="singer">{{ singer }}</p>
                </div>
                <div class="wrapper">
                  <ul class="content">
                    <li
                      v-for="(item, index) of ms"
                      :key="item.index"
                      style="margin: 8px 0"
                    >
                      {{ item.c }}
                    </li>
                  </ul>
                </div>
               
              </div>
               <el-button type="text" @click="_toggleShowMore()" style="margin-left:200px">展开</el-button>
                <div class="hd1" style="margin-top:150px">精彩评论</div>
                <div>
            <ul>
                <li v-for="items in Lycomment" style="border-bottom:1px solid rgb(230,230,230);margin-top:30px;font-size:12px">
                  <img :src="items.user.avatarUrl" alt="" width="50px;height:50px">
                  <span class="skyblue">{{ items.user.nickname }}</span> :
                  {{ items.content }}
                </li>
              </ul>
              </div>
        </el-aside>
        <el-main width="270" class="pldel-main">Main</el-main>
      </el-container>
      <div class="player">
        <!-- autoplay 自动播放 -->
        <audio :src="musicUrl" controls autoplay class="player_audio"></audio>
      </div>
    </div>
  </div>
</template>
<script>
import discoverm from "@/views/discoverM/discoverM.vue";
import axios from "axios";
export default {
  name: "lyric",
  data() {
    return {
      songDetail: {},
      Lrc: "",
      ms: [],
      song: "",
      singer: "",
      ki: 1,
      musicUrl: "",
      Lycomment:[]
    };
  },
  components: {
    discoverm,
  },
  methods: {
    _toggleShowMore() {
      this.ki = !this.ki;
    },
  },
  created() {
     axios({
      url: "http://localhost:3000/comment/music",
      method: "get",
      params: {
        id: this.$route.query.id,
      },
    }).then((res) => {
      this.Lycomment = res.data.hotComments;
    });
    axios({
      url: "http://localhost:3000/song/detail",
      method: "get",
      params: {
        ids: this.$route.query.id,
      },
    }).then((res) => {
      this.songDetail = res.data.songs[0];
    });
    axios({
      url: "http://localhost:3000/lyric",
      method: "get",
      params: {
        id: this.$route.query.id,
      },
    }).then((res) => {
      this.Lrc = res.data.lrc.lyric;
      console.log(res);
      if (this.Lrc.length == 0) return;
      // var lyricstxt = []; //存放歌词
      var lrcs = this.Lrc.split("\n"); //用回车拆分成数组
      // console.log(lrcs)
      for (var i in lrcs) {
        //遍历歌词数组
        lrcs[i] = lrcs[i].replace(/(^\s*)|(\s*$)/g, ""); //去除前后空格
        var t = lrcs[i].substring(
          lrcs[i].indexOf("[") + 1,
          lrcs[i].indexOf("]")
        ); //取[]间的内容
        var s = t.split(":"); //分离:前后文字
        if (!isNaN(parseInt(s[0]))) {
          //是数值
          var arr = lrcs[i].match(/\[(\d+:.+?)\]/g); //提取时间字段，可能有多个
          var start = 0;
          for (var k in arr) {
            start += arr[k].length; //计算歌词位置
          }
          var content = lrcs[i].substring(start); //获取歌词内容
          for (var k in arr) {
            var t = arr[k].substring(1, arr[k].length - 1); //取[]间的内容
            var s = t.split(":"); //分离:前后文字
            this.ms.push({
              //对象{t:时间,c:歌词}加入ms数组
              t: (parseFloat(s[0]) * 60 + parseFloat(s[1])).toFixed(3),
              c: content,
            });
          }
        }
      }
    });
  },
};
</script>
<style>
.pld_main {
  width: 979px;
  margin: 0 auto;

  background-color: rgb(255, 255, 255);
  border-left: solid 1px rgb(211, 211, 211);
  border-right: solid 1px rgb(211, 211, 211);
  border-bottom: solid 1px rgb(211, 211, 211);
  overflow: hidden;
}
.open {
  width: 200px;
  font-size: 12px;

  margin-top: 40px;
  overflow: hidden;
}
.flod {
  width: 200px;
  font-size: 12px;
  height: 327px;
  margin-top: 40px;
  overflow: hidden;
}
</style>